<template>
	    <div class="card rdsp-card-view" data-page="fireBuild">
	    	<div class="card-content card-content-padding">
	    		<div class="row carrent-card-top">
	    			<span class="rdsp-card-title">建筑物结构</span>
	    			<div class="carrent-card-top-right">
	    				<span class="all-fireBuild-num">监控:<span id="vedioNum"></span></span>
	    				<span class="all-fireBuild-num">分层图:<span id="layerNum"></span></span>
	    				<span class="all-fireBuild-num">探测器:<span id="dectorNum"></span></span>
	    			</div>
	    		</div>
	    		<div class="list accordion-list fireBuild-list">
	    		  <ul>
						
	    		  </ul>
	    		</div>
	    	</div>
	    	<!--更多按钮-->
	    	<a href="/moreBuild/" class="morelist"  data-view=".view-main">
	    	    <i class="iconfont app-icon-down icon-xiala"></i>
	    	</a>
	    </div>
</template>
<style scoped>
	.carrent-card-top{
		height: 50px;
	}
	.carrent-card-title{
		font-size: 15px;
		font-weight: bold;
	}
	.all-fireBuild-num{
		color: #868686;
		font-size: 12px;
		margin-left: 8px;
	}
	.all-fireBuild-num span{
		color: #3d3d3d;
	}
	.carrent-card-top-right{

	}
	.fireBuild-list .item-inner, .fireBuild-list .row{
		width: 100%;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.build-name{
		height: 18px;
		font-size: 14px;
	}
	.build-num{
		font-size: 12px;
		margin-top: 5px;
		color: #868686;
	}
	.build-num-cont{
		float: left;
		margin-right: 15px;
	}
	.fireBuild-list img{
		border-radius: 30px;
	}
	.fireBuild-list ul:before{ 
		width:0px !important;
	}
	.build-list-row{
		height: 35px;
		line-height: 35px;
		color: #666666;
	}
	.build-list-row .col-33{
		float: left;
		font-size: 14px;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.build-list-row .col-66{
		float: right;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.build-list-row .col-66 div{
		width: 65px;
		height: 22px;
		line-height: 22px;
		border-radius: 2px;
		background-color: #e1e1e1;
		font-size: 12px;
		display: inline-block;
		text-align: center;
	}
	.bulid-nodeList{
		margin-top: 5px !important;
		padding: 0 16px !important;
	}
	.fireBuild-list .item-media{
		padding-top: 5px;
	}

</style>
<script>
	return {
        methods: {
       		getBuildData:function(){
       			var self = this;
       			var $ = self.$$;
				$(".fireBuild-list ul").empty();
				if(isFirstChangeUnit){
				    isFirstChangeUnit = false;
				    Dao.getBuildCount({
				        userName: userInfor.accountName,
				        account:userInfor.accountName,
				        deviceId: appKeyObj.deviceId,
				        orgId: single_Orgid,
				        fbsId: 0,
				        pageIndex:0,
				        pageSize:1000,
				    },function(data){   
				        if(data){
			        		saveBuildTreeData = [];
				            saveBuildTreeData = data;
				            self.showBulidList();
				        }
				    });
				}else{
					self.showBulidList();
				}
       		},
       		showBulidList:function(){
				if(saveBuildTreeData){
					$("#vedioNum").html(saveBuildTreeData.video);
					$("#layerNum").html(saveBuildTreeData.picture);
					$("#dectorNum").html(saveBuildTreeData.device);
					if(saveBuildTreeData.details && saveBuildTreeData.details.length>0){
						for(var i=0;i < saveBuildTreeData.details.length; i++){
	   						$(".fireBuild-list ul").append(`<li class="accordion-item">
				    		      <a href="#" class="item-link item-content">
					    		      	<div class="item-media">
					    		      	 	<img src="`+staticPath+`img/common/default-build.png">
					    		      	</div>
					    		      	<div class="item-inner">
					    		      		<div class="row build-name">`+common.transNullundefined(saveBuildTreeData.details[i].fbsName)+`</div>
					    		      		<div class="row build-num">	
					    		      			<div class="build-num-cont">	
				    		      					<span>监控</span>
				    		      					<span>`+common.transNullundefined(saveBuildTreeData.details[i].video.toString())+`</span>
					    		      			</div>
					    		      			<div class="build-num-cont">	
					    		      				<span>分层图</span>
					    		      				<span>`+common.transNullundefined(saveBuildTreeData.details[i].picture.toString())+`</span>
					    		      			</div>
					    		      			<div class="build-num-cont">	
					    		      				<span>探测器</span>
					    		      				<span>`+common.transNullundefined(saveBuildTreeData.details[i].device.toString())+`</span>
					    		      			</div>
					    		      		</div>
					    		      	</div>
				    		      </a>
				    		      <div class="accordion-item-content">
				    		        <div class="block bulid-nodeList"></div>
				    		      </div>
				    		</li>`);
	   						if(saveBuildTreeData.details[i].nodes && saveBuildTreeData.details[i].nodes.length>0){
	   							var bulidNodeList = saveBuildTreeData.details[i].nodes;
	   							$(".bulid-nodeList").empty();
	   							for(var j=0; j<bulidNodeList.length;j++){
	   								$(".bulid-nodeList").append(`<div class="row build-list-row" id="build_list_`+bulidNodeList[j].fbsId+`">
										<div class="col-33">`+common.transNullundefined(bulidNodeList[j].fbsName)+`</div>
										<div class="col-66">
											<div>
												<a href="/comvdList/`+bulidNodeList[j].fbsId+`/" class="link" data-view=".view-main" style="color: #666666;">监控`+common.transNullundefined(bulidNodeList[j].video.toString())+`</a>
											</div>
											<div>
												<a href="/layer2D/`+userInfor.organizationIds+`/`+1+`/" class="link" data-view=".view-main" style="color: #666666;">分层图`+common.transNullundefined(bulidNodeList[j].picture.toString())+`</a>
											</div>
											<div>
												<a href="/moreDectorState/0/`+userInfor.organizationIds+`/`+userInfor.org.name+`/0/" class="link" data-view=".view-main" style="color: #666666;">探测器`+common.transNullundefined(bulidNodeList[j].device.toString())+`</a>
											</div>
										</div>
									</div>`);
	   							}
	   						}
						}
						$(".fireBuild-list li").eq(saveBuildTreeData.details.length-1).addClass('accordion-item-opened');
					}
				}else{
					$(".fireBuild-list ul").append(`<div class="no-data" style="margin: 10px 0;">暂无关注设备</div>`);
				}
       		}
       },
       on: {
         pageInit: function(e, page) {
         	var self = this;
         	self.getBuildData();
         }
       }
	}
</script>
